<template>
  <view class="container">
    <form @submit="handleSubmit">
      <view class="input-group">
        <label>选择模板</label>
        <picker mode="selector" :range="templates" range-key="templateName" @change="onTemplateChange">
          <view class="picker">{{ selectedTemplate.templateName || '请选择模板' }}</view>
        </picker>
      </view>
      <view class="input-group">
        <label>规则字符串</label>
        <input type="text" v-model="rule.ruleString" placeholder="请输入规则字符串"/>
      </view>
      <view class="input-group">
        <label>描述</label>
        <input type="text" v-model="rule.description" placeholder="请输入描述"/>
      </view>
      <view class="input-group">
        <label>状态</label>
        <switch  @change="toggleStatus" :checked="rule.status === 1"/>
      </view>
      <button formType="submit" class="submit-btn">保存</button>
    </form>
  </view>
</template>

<script>
export default {
  data() {
    return {
      templates: [],
      rule: {
        id: null,
        templateId: '',
        ruleString: '',
        description: '',
        status: 1
      },
      selectedTemplate: {}
    };
  },
  onShow() {
  	this.fetchTemplates();
	if (options.id) {
	  this.loadRule(options.id);
	}
  },
  onLoad(options) {
	this.fetchTemplates();
    if (options.id) {
      this.loadRule(options.id);
    }
    
  },
  methods: {
    // 加载规则详情
    async loadRule(id) {
      try {
        const response = await uni.request({
          url: `http://localhost:8083/rules/${id}`,
          method: 'GET'
        });
        this.rule = response.data;
		console.log(this.rule)
        this.selectedTemplate = this.templates.find(t => t.templateId === this.rule.templateId) || {};
		console.log(this.selectedTemplate)
      } catch (error) {
        console.error('加载规则失败', error);
      }
    },
    
    // 获取模板列表
    async fetchTemplates() {
      try {
        const response = await uni.request({
          url: 'http://localhost:8083/template',
          method: 'GET'
        });
        this.templates = response.data;
      } catch (error) {
        console.error('没连上后台你个笨蛋', error);
      }
    },
    
    // 提交表单
    async handleSubmit(e) {
      if (!this.rule.ruleString) {
        uni.showToast({ title: '请填写规则字符串', icon: 'none' });
        return;
      }
      try {
        const method = this.rule.id ? 'PUT' : 'POST';
        const url = this.rule.id ? `http://localhost:8083/rules` : 'http://localhost:8083/rules/save';

        await uni.request({
          url,
          method,
          data: this.rule
        });
		
        uni.navigateBack();
		uni.showToast({
		    title: '保存成功', // 提示的内容
		    icon: 'success',  // 图标类型，可选值有 "success", "loading", "none"，默认为 "success"
		    duration: 500   // 提示的延迟时间，单位为毫秒，默认为1500
		});
      } catch (error) {
        console.error('保存规则失败', error);
      }
    },
    
    // 模板选择器改变事件
    onTemplateChange(e) {
      this.selectedTemplate = this.templates[e.detail.value];
      this.rule.templateId = this.selectedTemplate.templateId;
    },
    
    // 状态切换
    toggleStatus(e) {
      this.rule.status = e.detail.value ? 1 : 0;
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20rpx;
}
.input-group {
  margin-bottom: 20rpx;
}
.picker {
  padding: 10rpx;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
}
.submit-btn {
  width: 100%;
  background-color: #07c160;
  color: white;
}
</style>